//朋友圈
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
import QtQml 2.12
ApplicationWindow {
    id:pengyouquanPage
    visible: true
    width: 688
    height: 1000
    property int btnSize:35


    property int iconSize:25
    title: "朋友圈"

    Rectangle{
        anchors.fill: parent


        ColumnLayout{
            anchors.fill: parent

            Rectangle{
                id:bj
                Layout.alignment: Qt.AlignTop
                Layout.bottomMargin: -150
                Layout.preferredHeight:  415
                Layout.preferredWidth:  parent.width
                Image{

                    anchors.fill: parent

                    source:"https://pic3.zhimg.com/v2-10581f89fc96ea41a890ed8cfeb98530_r.jpg?source=1940ef5c"
                }

                ColumnLayout{
                    anchors.fill: parent
                    Rectangle{
                        Layout.alignment: Qt.AlignTop
                        z:999
                        Layout.preferredHeight: 40
                        Layout.preferredWidth: parent.width
                        color:"transparent"
                        RowLayout{
                            anchors.fill:parent
                            Rectangle{
                                height:40
                                width: 80
                                Layout.alignment: Qt.AlignLeft
                                color:"transparent"
                                Button{
                                    anchors.left: parent.left
                                    id:message
                                    height:btnSize
                                    width:btnSize
                                    icon {
                                        height:iconSize
                                        width:iconSize
                                        source: "qrc:/images/lingdang-xianxing"
                                        color:"#c2c2c2"
                                    }
                                    background: Rectangle{
                                        id:messageRectangle
                                        anchors.fill: parent
                                        color:"transparent"
                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;
                                            onEntered: {    //鼠标移入
                                                message.icon.color = "#000000"
                                                //背景色

                                            }
                                            onExited: {
                                                //移出icon颜色
                                                message.icon.color = "#c2c2c2"
                                                //背景色

                                            }
                                        }
                                    }
                                }

                                Button{
                                    id:refresh
                                    anchors.left: message.right
                                    height:btnSize
                                    width:btnSize
                                    icon {
                                        height:iconSize
                                        width:iconSize
                                        source: "qrc:/images/shuaxin.png"
                                        color:"#c2c2c2"
                                    }
                                    background: Rectangle{
                                        id:refreshRectangle
                                        anchors.fill: parent
                                        color:"transparent"
                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;
                                            onEntered: {    //鼠标移入
                                                refresh.icon.color = "#000000"
                                                //背景色

                                            }
                                            onExited: {
                                                //移出icon颜色
                                                refresh.icon.color = "#c2c2c2"
                                                //背景色

                                            }
                                        }
                                    }

                                }



                            }

                            Rectangle{

                                height:40
                                width: 120
                                Layout.alignment: Qt.AlignRight
                                color:"transparent"

                                Button{
                                    //置前
                                    id:thumbtack
                                    height:btnSize
                                    width:btnSize
                                    anchors.right: conceal.left
                                    icon {
                                        height:iconSize
                                        width:iconSize
                                        source: "qrc:/images/thumbtack"
                                        color:"#c2c2c2"
                                    }

                                    background: Rectangle{
                                        id:thumbtackRectangle
                                        anchors.fill: parent
                                        color:"transparent"
                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;
                                            onEntered: {    //鼠标移入
                                                thumbtack.icon.color = "#000000"
                                                //背景色

                                            }
                                            onExited: {
                                                //移出icon颜色
                                                thumbtack.icon.color = "#c2c2c2"
                                                //背景色

                                            }
                                        }
                                    }
                                }

                                Button{
                                    id:conceal
                                    height:btnSize
                                    width:btnSize
                                    anchors.right:exit.left
                                    icon {
                                        height:iconSize
                                        width:iconSize
                                        source: "qrc:/images/jianhao"
                                        color:"#c2c2c2"
                                    }

                                    background: Rectangle{
                                        //隐藏
                                        id:concealRectangle
                                        anchors.fill: parent

                                        color:"transparent"
                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;
                                            onEntered: {    //鼠标移入
                                                conceal.icon.color = "#000000"
                                                //背景色

                                            }
                                            onExited: {
                                                //移出icon颜色
                                                conceal.icon.color = "#c2c2c2"
                                                //背景色

                                            }
                                        }
                                    }
                                }



                                Button{
                                    id:exit
                                    height:btnSize
                                    width:btnSize
                                    anchors.right:parent.right
                                    icon {
                                        height:iconSize-10
                                        width:iconSize-10
                                        source: "qrc:/images/cha"
                                        color:"#c2c2c2"
                                    }

                                    background: Rectangle{
                                        id:exitRectangle
                                        anchors.fill: parent
                                        color:"transparent"
                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;
                                            onEntered: {    //鼠标移入
                                                exit.icon.color = "#ffffff"
                                                //背景色
                                                exitRectangle.color = "#fa5151";
                                            }
                                            onExited: {
                                                //移出icon颜色
                                                exit.icon.color = "#c2c2c2"
                                                //背景色
                                                exitRectangle.color ="transparent";
                                            }
                                            onClicked: {
                                                pengyouquanPage.close()
                                            }
                                        }
                                    }
                                }
                            }

                        }


                    }


                }


            }

            Rectangle{
                z:999
                height: 120
                width: 200
                anchors.right: parent.right
                anchors.rightMargin: 30
                anchors.bottom: parent.bottom
                anchors.bottomMargin:+550
                color:"transparent"

                Image{
                    height:75
                    width:75
                    source:"https://c-ssl.dtstatic.com/uploads/blog/202209/02/20220902142254_f2a7e.thumb.1000_0.jpeg"
                    anchors.right:  parent.right
                    anchors.rightMargin: 5
                    anchors.top: parent.top
                    anchors.topMargin: 30
                }

                Text{
                    text: "荒原"
                    color:"#ffffff"
                    font.bold: true
                    font.pixelSize: 22
                    anchors.left:parent.left
                    anchors.leftMargin: 40
                    anchors.top: parent.top
                    anchors.topMargin: 40
                }
            }

            Rectangle{
                Layout.alignment: Qt.AlignRight
                Layout.preferredHeight: parent.height-bj.height
                Layout.preferredWidth: parent.width
                ColumnLayout{
                    anchors.fill: parent
                    Rectangle{
                        Layout.preferredWidth: parent.width
                        Layout.preferredHeight: parent.height
                        color:"#e5e4e4"

                        ListView {
                            width:parent.width
                            height:parent.height
                            orientation: ListView.Vertical//垂直列表
                            interactive: true;//元素可拖动
                            clip: true //


                            ScrollBar.vertical: ScrollBar {
                                id: scrollBar
                                onActiveChanged: {
                                    console.log("onActiveChanged========================")
                                    active = true;
                                }
                                Component.onCompleted: {
                                    //                    scrollBar.handle.color = "yellow"
                                    //                    scrollBar.active = true;
                                    //                    scrollBar.handle.width = 10;
                                    console.log("Component.onCompleted========================")
                                }
                            }

                            model: ListModel {
                                id: myModel
                                ListElement { friendUserImg: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ZtrvDWpDrJNiyRQj6DwPvwAAAA?rs=1&pid=ImgDetMain"; friendNmae: "阿娇      ";friendMessage:"沙滩阳光?";friendMessageTime:"21:45";FriendImages:"https://pic2.zhimg.com/v2-ec5e662385915a28ea179f6fedfb8bb6_r.jpg?source=172ae18b";GoodFired:"阿娇,阿瓜,阿霞"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-4/16191446227432875.jpg"; friendNmae: "小西";friendMessage:"为什么不理我?";friendMessageTime:"16:40";GoodFired:"阿娇,阿瓜,阿霞"}
                                ListElement { friendUserImg: "https://www.telnote.cn/uploads/touxiang/80/014126751420.jpeg"; friendNmae: "妍妍";friendMessage:"理我一下好不好?";friendMessageTime:"6:45"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-7/16254525572730039.jpg"; friendNmae: "小蒙";friendMessage:"到底在干嘛?";friendMessageTime:"10:05"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-1/16118933074267713.jpg"; friendNmae: "大吕";friendMessage:"哼?";friendMessageTime:"8:24"}
                                ListElement { friendUserImg: "https://tse3-mm.cn.bing.net/th/id/OIP-C.nnOMtJyMvYeZssL5CWwsLAAAAA?rs=1&pid=ImgDetMain"; friendNmae: "胡佳";friendMessage:"生气~";friendMessageTime:"20:11"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-7/16264890225197706.jpg"; friendNmae: "诗桥";friendMessage:"嘿?";friendMessageTime:"前天"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2019-6/2019061008021958649.jpg"; friendNmae: "呱呱";friendMessage:"到底在干嘛?";friendMessageTime:"19:45"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2018-5/2018050810410773085.jpg"; friendNmae: "小伦";friendMessage:"哈哈哈哈";friendMessageTime:"昨天"}
                                ListElement { friendUserImg: "https://tse1-mm.cn.bing.net/th/id/OIP-C.ZtrvDWpDrJNiyRQj6DwPvwAAAA?rs=1&pid=ImgDetMain"; friendNmae: "阿娇      ";friendMessage:"你在干嘛呢?";friendMessageTime:"21:45"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-4/16191446227432875.jpg"; friendNmae: "小西";friendMessage:"为什么不理我?";friendMessageTime:"16:40"}
                                ListElement { friendUserImg: "https://www.telnote.cn/uploads/touxiang/80/014126751420.jpeg"; friendNmae: "妍妍";friendMessage:"理我一下好不好?";friendMessageTime:"6:45"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-7/16254525572730039.jpg"; friendNmae: "小蒙";friendMessage:"到底在干嘛?";friendMessageTime:"10:05"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-1/16118933074267713.jpg"; friendNmae: "大吕";friendMessage:"哼?";friendMessageTime:"8:24"}
                                ListElement { friendUserImg: "https://tse3-mm.cn.bing.net/th/id/OIP-C.nnOMtJyMvYeZssL5CWwsLAAAAA?rs=1&pid=ImgDetMain"; friendNmae: "胡佳";friendMessage:"生气~";friendMessageTime:"20:11"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2021-7/16264890225197706.jpg"; friendNmae: "诗桥";friendMessage:"嘿?";friendMessageTime:"前天"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2019-6/2019061008021958649.jpg"; friendNmae: "呱呱";friendMessage:"到底在干嘛?";friendMessageTime:"19:45"}
                                ListElement { friendUserImg: "https://p.qqan.com/up/2018-5/2018050810410773085.jpg"; friendNmae: "小伦";friendMessage:"哈哈哈哈";friendMessageTime:"昨天"}
                            }

                            delegate: Rectangle {
                                width:parent.width
                                id:friendItem
                                height: getHeight()

                                property int friendItemHeight

                                function getHeight(){
                                    if (FriendImages&&GoodFired){
                                        return (82+245 +100)
                                    }

                                    if(!FriendImages&&GoodFired){
                                        return(82+100)
                                    }
                                    return 120

                                }

                                width: parent.width
                                color:"#ffffff"


                                MouseArea{
                                    anchors.fill: parent;
                                    hoverEnabled: true;
                                    onEntered: {    //鼠标移入

                                    }
                                    onExited: {


                                    }

                                    onClicked: {
                                        comment.visible=false
                                    }

                                }
                                Image{
                                    id:userImg
                                    source:friendUserImg
                                    height: 50
                                    width: 50
                                    anchors.top: parent.top
                                    anchors.topMargin: 15
                                    anchors.left: parent.left
                                    anchors.leftMargin: 15

                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        //小手
                                        cursorShape: Qt.PointingHandCursor;}

                                }
                                Image{
                                    id:reiendImg
                                    height:245
                                    width:375
                                    source:FriendImages?FriendImages:""
                                    anchors.left: userImg.right
                                    anchors.leftMargin: 10
                                    anchors.top: friendMsg.bottom
                                    anchors.topMargin: 10
                                    visible:FriendImages?true:false

                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        //小手
                                        cursorShape: Qt.PointingHandCursor;}
                                }

                                Rectangle{
                                    id:goodRectangleShow
                                    width:580
                                    height:GoodFired?45:0
                                    color:GoodFired?"#f7f7f7":"#ffffff"
                                    anchors.top: friendMsgTime.bottom
                                    anchors.topMargin: 20
                                    anchors.left: friendMsgTime.left
                                    visible:GoodFired?true:false
                                    radius:8

                                    Button {
                                        visible:goodRectangleShow.visible
                                        id:love
                                        height:50
                                        width:50
                                        anchors.verticalCenter: parent.verticalCenter
                                        anchors.left: parent.left
                                        anchors.leftMargin: 15
                                        icon {
                                            height:30
                                            width:30
                                            source:GoodFired?"qrc:/images/aixin":""
                                            color:"#63769d"
                                        }

                                        background: Rectangle{
                                            anchors.fill: parent
                                            color:"transparent"
                                        }
                                    }

                                    //                                    Text{
                                    //                                        text:GoodFired
                                    //                                        anchors.verticalCenter: parent.verticalCenter
                                    //                                        anchors.left: love.right
                                    //                                        font.pixelSize: 20
                                    //                                        font.bold: true
                                    //                                        color:"#697ba0"

                                    //                                        MouseArea{
                                    //                                            anchors.fill: parent;
                                    //                                            //小手
                                    //                                            cursorShape: Qt.PointingHandCursor;
                                    //                                            hoverEnabled: true;
                                    //                                        }
                                    //                                    }
                                }
                                Text {
                                    id:userNcikename
                                    anchors.top: parent.top
                                    anchors.topMargin: 15
                                    anchors.left: userImg.right
                                    anchors.leftMargin: 10
                                    text: friendNmae
                                    color:"#576b95"
                                    font.bold: true
                                    font.pixelSize: 22
                                    MouseArea{
                                        anchors.fill: parent;
                                        hoverEnabled: true;

                                        //小手
                                        cursorShape: Qt.PointingHandCursor;}
                                }

                                Text {
                                    id:friendMsg
                                    anchors.top:  userNcikename.bottom
                                    anchors.topMargin: 10
                                    anchors.left: userImg.right
                                    anchors.leftMargin: 10
                                    font.bold: true
                                    font.pixelSize: 20
                                    text: friendMessage
                                    color:"#191919"
                                }

                                Text {
                                    id:friendMsgTime
                                    anchors.top:  FriendImages?reiendImg.bottom : friendMsg.bottom
                                    anchors.topMargin: 25
                                    anchors.left: parent.left
                                    anchors.leftMargin: 75
                                    text: friendMessageTime
                                    font.pixelSize: 18
                                    font.bold: true
                                    color:"#9e9e9e"

                                }

                                Rectangle{
                                    id:comment
                                    width: 230
                                    height:45
                                    color:"#4c4c4c"
                                    anchors.right: good.left
                                    anchors.rightMargin: 10
                                    anchors.top:  FriendImages?reiendImg.bottom : friendMsg.bottom
                                    anchors.topMargin: 15
                                    visible:false
                                    RowLayout{
                                        anchors.fill: parent

                                        Button{
                                            id:isGood
                                            Layout.preferredWidth:parent.width*0.5
                                            Layout.preferredHeight: parent.height
                                            Layout.alignment: Qt.AlignLeft

                                            Image{
                                                height:25
                                                width:25
                                                source:"qrc:/images/baiseaixin"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 18
                                            }
                                            Text{
                                                text:"取消"
                                                font.bold: true
                                                font.pixelSize: 20
                                                anchors.right:parent.right
                                                anchors.rightMargin: 25
                                                color:"#ffffff"
                                                anchors.verticalCenter: parent.verticalCenter

                                            }

                                            background:Rectangle{
                                                id:isGoodRectangle
                                                color:"#4c4c4c"
                                                anchors.fill:parent
                                                MouseArea{
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    //小手
                                                    cursorShape: Qt.PointingHandCursor;

                                                    onEntered: {    //鼠标移入

                                                        //背景色
                                                        isGoodRectangle.color ="##444444";
                                                    }
                                                    onExited: {
                                                        //移出icon颜色

                                                        //移出背景色
                                                        isGoodRectangle.color = "#4c4c4c";

                                                    }


                                                }

                                            }

                                        }
                                        Button{
                                            id:remark
                                            Layout.preferredWidth:parent.width*0.5
                                            Layout.preferredHeight: parent.height
                                            Layout.alignment: Qt.AlignRight

                                            Image{
                                                height:24
                                                width:24
                                                source:"qrc:/images/duihuakuang"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 18
                                            }
                                            Text{
                                                text:"评论"
                                                font.bold: true
                                                font.pixelSize: 20
                                                anchors.right:parent.right
                                                anchors.rightMargin: 25
                                                color:"#ffffff"
                                                anchors.verticalCenter: parent.verticalCenter

                                            }

                                            background:Rectangle{
                                                id:remarkRectangle
                                                color:"#4c4c4c"
                                                anchors.fill:parent
                                                MouseArea{
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    //小手
                                                    cursorShape: Qt.PointingHandCursor;

                                                    onEntered: {    //鼠标移入

                                                        //背景色
                                                        remarkRectangle.color ="##444444";
                                                    }
                                                    onExited: {
                                                        //移出icon颜色

                                                        //移出背景色
                                                        remarkRectangle.color = "#4c4c4c";

                                                    }


                                                }

                                            }

                                        }

                                    }
                                }

                                Button {
                                    id:good
                                    width:40
                                    height:30
                                    anchors.top:  FriendImages?reiendImg.bottom : friendMsg.bottom
                                    anchors.topMargin: 15
                                    anchors.right:parent.right
                                    anchors.rightMargin:35
                                    icon{
                                        height:25
                                        width:25
                                        source:"qrc:/images/shengluehao"
                                    }

                                    background: Rectangle{
                                        id:goodRectangle
                                        anchors.fill: parent
                                        color:"#f7f7f7"

                                        MouseArea{
                                            anchors.fill: parent;
                                            hoverEnabled: true;

                                            //小手
                                            cursorShape: Qt.PointingHandCursor;

                                            onEntered: {    //鼠标移入
                                                good.icon.color = "#4e6086"
                                                //背景色
                                                goodRectangle.color ="#dedede";
                                            }
                                            onExited: {
                                                //移出icon颜色
                                                good.icon.color = "#576b95";
                                                //移出背景色
                                                goodRectangle.color = "#f7f7f7";
                                            }
                                            onClicked: {

                                                comment.visible=true
                                            }

                                        }
                                    }


                                }




                            }
                        }

                    }
                }
            }

        }


    }




}
